<template>
  <div
    class="w-full relative text-[#fff] bg-cover bg-center bg-no-repeat h-screen bg-[url('@/assets/login/login-bg.png')]"
  >
    <!-- login-wrapper -->
    <div class="content w-full w-max-[750px] h-full">
      <div class="flex items-center justify-between pt-[26px]">
        <div></div>
        <div class="close" @click="router.push('/')"></div>
      </div>
      <div class="title">{{ $t("layer.login.signIn") }}</div>

      <div class="flex flex-col gap-[10px]" ref="formRef">
        <div>
          <input
            v-model="formState.username"
            class="input-wrapper"
            type="text"
            :placeholder="`${
              $t('page.setting.Enter') + $t('layer.login.user_name')
            }`"
            autocomplete="off"
            @blur="onBlur"
          />
        </div>
        <div class="password-box">
          <input
            v-model="formState.password"
            class="input-wrapper"
            :type="!isEye ? 'password' : 'text'"
            data="passworedtype"
            :placeholder="`${
              $t('page.setting.Enter') + $t('layer.login.password')
            }`"
            autocomplete="off"
            @blur="onBlur"
          />
          <van-icon
            v-if="isEye"
            class="icon"
            name="eye-o"
            @click="isEye = false"
          />
          <van-icon
            v-else
            class="icon"
            name="closed-eye"
            @click="isEye = true"
          />
        </div>
        <div class="flex flex-row-reverse">
          <span class="forget-password" @click="handleForget"
            >{{ $t("layer.login.ForgotPassword") }}?</span
          >
        </div>
        <div>
          <button class="submit-btn mt-[20px]" @click="hanleLogin">
            {{ $t("layer.login.signIn") }}
          </button>
        </div>
        <div class="text-[#c9d1e4]">
          {{ $t("user.jkgame_new") }}
          <span class="text-[#0fbfff]" @click="hanldeRegister">{{
            $t("layer.login.CreateanAccount")
          }}</span>
        </div>
      </div>
      <van-divider
        :style="{
          color: '#c9d1e4',
          fontSize: '12px'
        }"
        >{{ $t("user.direct_login") }}</van-divider
      >

      <div class="flex justify-between">
        <div
          class="visitor-login flex items-center p-[2px] text-[#c9d1e4] whitespace-nowrap overflow-hidden"
          @click="main.touristLoginApi"
        >
          <img
            class="w-[30px] h-[30px]"
            src="@/assets/login/youke@2x.png"
            alt=""
          />
          <span class="ml-[6px] text-sm">{{ $t("user.visitor_login") }}</span>
        </div>
        <!-- <div class="link-login-wrapper">
          <div class="round">
            <img
              class="w-[11px] h-[21px]"
              src="@/assets/login/facebook@2x.png"
              alt=""
            />
          </div>
        </div> -->
        <div class="link-login-wrapper" @click="googleHandle">
          <div class="round">
            <img
              class="w-[18px] h-[18px]"
              src="@/assets/login/guge@2x.png"
              alt=""
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { shallowRef, ref } from "vue";
import { mainAct } from "@/store/activeda";
import { userLogin } from "@/api/user";
import { ElNotification } from "element-plus";
import router from "@/router";
import { eventBus } from "@/utils/eventBus";
import { useRoute } from "vue-router";
import { useI18n } from "vue-i18n";

const main = mainAct();
const { t } = useI18n();
const RegisterRef = shallowRef(null);
const isEye = ref(false);
const formState = ref({
  username: "",
  password: ""
});
const route = useRoute();
const handleForget = () => {
  main.showForget();
};

const googleHandle = () => {
  const clientId =
    main.oauth?.find(item => item.name == "Google")?.client_id || "";
  // const clientId = "268336247979-nactpd5f8gt04ov9l3cj7pkhnhibsr97.apps.googleusercontent.com";
  const url = window.location.href; // 你可以替换为不同的 URL
  const regex = /^https?:\/\/([a-zA-Z0-9.-]+(?:\:[0-9]+)?)\/?(\S*)$/;

  const match = url.match(regex);

  if (match) {
    console.log("Extracted domain:", match[1]); // 提取的域名部分
    console.log("Path or hash:", match[2]); // 提取路径或哈希部分（例如: #/casino）
  } else {
    console.log("No valid URL found.");
  }
  const redirectUri = window.location.origin + "/";
  const googleAuthUrl =
    `https://accounts.google.com/o/oauth2/v2/auth?` +
    `client_id=${clientId}&` +
    `redirect_uri=${redirectUri}&` +
    `scope=openid profile email&` +
    `response_type=code&` +
    `prompt=select_account&` +
    `deviceType=mobile&` +
    `flowName=GeneralOAuthFlow`;

  window.location.href = googleAuthUrl;
};

const hanldeRegister = () => {
  main.showRegister();
};

const hanleLogin = () => {
  const p = {
    user_name: formState.value.username,
    password: formState.value.password
  };
  if (!p.password) {
    ElMessage.error("请输入密码");
    return;
  }
  userLogin(p).then(res => {
    if (res?.errno == 0) {
      main.isLogin = true;
      main.token = res.data.token;
      let user_detail = {
        ...res.data.user_detail,
        uid: res.data.user_detail.uid.toString()
      };
      main.user_detail = user_detail;
      eventBus.emit("showActiveProp");
      if (main.user_detail.payment_password_set == 0) {
        ElNotification({
          position: "top-right",
          duration: 0,
          zIndex: 1004,
          title: t("layer.wallet.tip"),
          message: t("layer.wallet.plzSetFst"),
          type: "warning"
        });
      }
      eventBus.emit("tigger");
      router.push({ path: "/" });
    } else {
      return;
    }
  });
};

const onBlur = () => {
  window.scrollTo(0, 0);
};
</script>

<style scoped lang="scss">
@media (min-width: 400px) {
  .login-wrapper {
    overflow: auto !important;
    // 苹果滚动兼容
    background-position: center center !important;
    background-size: 100% 100% !important;
  }
}
// 媒体查询
@media (max-width: 1560px) {
  .close {
    // position: fixed;
    // margin-right: 20px;
    // position: absolute;
    // right: 20px;
    width: 20px;
    height: 20px;
    cursor: pointer;
    // top: 20px;
    // right: 20px;
    background: url("@/assets/login/login-close.png") no-repeat;
    background-size: 100% 100%;
  }
  .login-wrapper {
    position: relative;
    display: block !important;
    font-family: PingFangSC;
    font-size: 12px;
    background-color: #1a2c38;
    background: url("@/assets/login/login-bg.png") no-repeat top center;
    // background-size: 375px 400px;
    background-size: 100% 100%;
    // 处理塌陷问题
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .content {
    // max-width: 375px;
    padding: 0 15px;
    // margin-top: 200px;
    // margin-left: auto;
    // margin-right: auto;
    background: linear-gradient(180deg, rgba(0, 0, 0, 0), rgba(#1a2c38, 1));
    .title {
      // width: 72px;
      // height: 39px;
      padding-top: 190px;
      font-family: TurretRoad;
      display: flex;
      font-size: 18px;
      font-weight: 800;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      color: #fff;
    }
    .password-box {
      position: relative;

      .icon {
        position: absolute;
        right: 10px;
        top: 10px;
      }
    }

    .input-wrapper {
      width: 100%;
      height: 40px;
      padding: 10px 10px 12px;
      padding-right: 40px;
      border-radius: 3px;
      border: solid 1px #426073;
      background-color: #0f212e;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      color: #c9d1e4;
      outline: none;
    }

    .submit-btn {
      width: 100%;
      height: 40px;
      display: flex;
      justify-content: center;
      align-items: center;
      background-color: #1475e1;
      font-family: PingFangSC;
      font-size: 13px;
      border-radius: 3px;
    }
    .forget-password {
      font-family: PingFangSC;
      font-size: 12px;
      font-weight: normal;
      font-stretch: normal;
      font-style: normal;
      line-height: normal;
      letter-spacing: normal;
      text-align: left;
      color: #c9d1e4;
    }

    .visitor-login {
      width: 33.33%;
      height: 34px;
      border-radius: 29px;
      border: solid 1px rgba(115, 152, 192, 0.3);
      background-color: #2b3f4b;
    }

    .link-login-wrapper {
      width: 33.33%;
      display: flex;
      align-items: center;
      justify-content: center;
      .round {
        width: 34px;
        height: 34px;
        border-radius: 50%;
        border: solid 1px rgba(115, 152, 192, 0.3);
        background-color: #2b3f4b;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }
  }
}

.login-wrapper {
  display: none;
}
</style>
